<template>
    <div class="play-bill" ref="playBill">
        <!-- 限量 -->
        <div class="limit">
            <div class="num">
                <div class="real_num">{{this.billData.total}}</div>
                <div class="real_name"><span class="dot_left"></span>限量/剩余<span class="dot_right"></span></div>
            </div>
            <div class="limit_num" v-if="this.billData.usermaxbuy">每个用户限购{{this.billData.usermaxbuy}}{{this.billData.unit}}</div>
            <div class="logo">
                <img src="@/assets/images/bill_logo.png" alt="">
            </div>
            <div class="code">
                <img alt="" ref="codes">
                <div>识别小程序码购买</div>
            </div>
        </div>
        <!-- 内容文字介绍 -->
        <div class="intro">
            <div class="title">
                <h1 v-if="this.billData.title.length >8">{{this.billData.title.substring(0,8)}}...</h1>
                <h1 v-else>{{this.billData.title}}</h1>
                <div>
                    <span class="maidian">{{this.billData.selling}}</span>
                    <!-- 自定义属性 -->
                    <div class="shu">{{this.billData.selfvalue}}</div>
                </div>
            </div>
            <div class="sale_na">
                <span class="time">{{this.billData.pTimestart}}</span>
                <span>{{this.billData.fTimestart}}开售</span>
                <span class="time ti_time">{{this.billData.expectedPickTime}}</span>
                <span>到小区门店自提</span>
            </div>
        </div>
        <!-- 参考图片 -->
        <div class="refer">
            <div class="msg">
                <div class="msg_left">
                    <div class="jinzhi">
                        <span class="price_name">锦致价</span>
                        <div class="norms" v-if="this.billData.specTitle.length>8">{{this.billData.specTitle.substring(0,8)}}...</div>
                        <div class="norms" v-else>{{this.billData.specTitle}}</div>
                    </div>
                </div>
                <div class="price">{{this.billData.marketprice}}</div>
                <!-- <div class="price">9.999</div> -->
                <div class="msg_right">
                    <div class="market_price">市场价￥{{this.billData.productprice}}</div>
                    <!-- <div class="market_price">市场价￥9.999</div> -->
                    <div class="unit">元/{{this.billData.unit}}</div>
                </div>
                <!-- 边角 -->
                <img src="@/assets/images/corner.png" alt="" class="corner">
            </div>
            <img alt="" class="store_img" ref="storeImg">
            <div class="zi_right">
                <div>图</div>
                <div>片</div>
                <div>仅</div>
                <div>供</div>
                <div>参</div>
                <div>考</div>
                <div>请</div>
                <div>以</div>
                <div>实</div>
                <div>物</div>
                <div>为</div>
                <div>准</div>
            </div>
            <!-- 锦织标识 -->
            <img src="@/assets/images/jinzhi_logo.png" alt="" class="mark">
        </div>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    name:'play-bill',
    props:['billData','billCode','qrImage'],
    data(){
        return {
            test:"500g每个每瓶每个每个"
        }
        
    },
    methods:{
        loaPic(el,url1,num){
            var self = this
             var imgs = new Image
             imgs.crossOrigin = "Anonymous";
             imgs.src = url1
             imgs.onload = function() {
                var that = self
                var canvas = document.createElement('canvas');
                canvas.width = imgs.width;
                canvas.height = imgs.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(imgs, 0, 0, imgs.width, imgs.height);
                el.src = canvas.toDataURL("image/png");
                num++
                if(num ==1){
                    if (that.billData.thumbSquare) {
                        that.loaPic(that.$refs.storeImg,that.billData.thumbSquare,num)
                    } else {
                        that.loaPic(that.$refs.storeImg,that.billData.thumb,num)
                    }
                    
                }else{
                    that.save()
                }
            }
        },
        save(){
            html2canvas(this.$refs.playBill).then(canvas => {
                this.$refs.playBill.style.display = "none"
                var imgUri = canvas.toDataURL();
                this.$emit('handlebill',{imgUri,flag:true})
		    });
        }
    },
    mounted(){
        this.loaPic(this.$refs.codes,this.billData.quickMarkUrl,0)
         
    }
}
</script>
<style lang="scss" scoped>
    .play-bill {
        position: fixed;
        z-index: -99999999;
        // 添加
        // top: 0;
        background-color: rgba(0,204,102,0.09);
        font-family: "Microsoft YaHei";
        .limit {
            height: 140px;
            width: 365px;
            margin: 0 auto;
            position: relative;
           .num {
               position: absolute;
                left: 40px;
                top: 0;
               width: 65px;
               height: 70px;
               color:#fff;
               font-weight: 900;
               text-align: center;
                background-image: url('../../../assets/images/yu.png');
                background-repeat: no-repeat;
                background-position: 0 0;
                background-size: 65px 71px;
               .real_num {
                   font-size: 20px;
                   margin-top: 10px;
               }
               .real_name {
                   font-size: 9px;
                    .dot_left,
                    .dot_right {
                        display: inline-block;
                        width: 3px;
                        height: 3px;
                        border-radius: 50%;
                        background: #fff;
                        margin: 1px 4px;
                    }
               }
           } 
           .limit_num {
               position: absolute;
               top: 70px;
               left: 34px;
              color: #00cc66; 
              font-weight: 900;
              font-size: 10px;
           }
           .logo {
               text-align: center;
                width: 100%;
                height: 100%;
               img {
                margin-top: 45px;
                width: 90px;
                height: 90px;
                border-radius:15px;
               }
           }
           .code {
               position: absolute;
               width: 80px;
               height: 80px;
               right: 16px;
               top: 8px;
               text-align: center;
               img {
                   width: 100%;
                   height: 100%;
                   font-family: "微软雅黑";
                   border-radius: 8px;
               }
               div {
                   font-size: 10px;
                   margin-top: -6px;
               }
           }
        }
        .intro {
            .title {
                text-align: center;
                font-family: "Noto Sans S Chinese Black";
                margin:25px 0 10px 0;
                div {
                    height: 36px;
                }
                .maidian {
                    height: 16px;
                }
                .shu {
                    height: 24px;
                }
                h1 {
                    // color: #ff0066;
                    color: #00cc66;
                    margin: 0;
                    font-size: 36px;
                    margin-bottom: 5px;
                }
                span{
                    font-size: 12px;
                    font-family: "微软雅黑"; 
                    font-weight: 900;
                }
                div {
                    margin-top: -2px;
                    font-size: 10px;
                    font-family: "微软雅黑";
                }
            }
            .sale_na {
                text-align: center;
                font-weight: 900;
                margin-bottom: 8px;
                .time {
                    // color: #00cc66;
                    color: #ff6699;
                    margin-right: -4px;
                }
                .ti_time {
                    // margin-left: 6px;
                }
            }
        }
        .refer  {
            position: relative;
            width: 310px;
            height: 358px;
            margin: auto;
            .msg {
                position: absolute;
                top: 0;
                left: 50%;
                width: 280px;
                text-align: center;
                transform: translateX(-140px);
                height: 80px;
                background-color: #fff;
                border-radius:5px;
                // box-shadow: 2px 2px rgba(0,204,102,1);
                border-right: 1px solid rgba(0,204,102,1);
                border-bottom: 1px solid rgba(0,204,102,1);
                z-index: 66;
                // padding-right: 11px;
                padding-right: -8px;
                box-sizing: border-box;
                .corner {
                    position: absolute;
                    top: -4px;
                    left: -9px;
                    width: 14px;
                    height: 9px;
                }
                .msg_left {
                    float: left;
                    height: 74px;
                    .jinzhi {
                        display: inline-block;
                        // margin-top: 20px;
                        margin-top: 17px;
                        text-align: right;
                        // width: 100px;
                        .norms{
                            // color: #ff0066;
                            font-size: 11px;
                            color: #00cc66;
                            font-weight: 900;
                            // width: 90px;
                            width: 95px;
                            height: 60px;
                            line-height: 14px;
                            white-space:normal;
                            word-break:break-all;
                            word-wrap:break-word; 
                            margin-top: -4px;
                            margin-left: -10px;
                        }
                        .price_name {
                            // font-size: 12px;
                            font-size: 13px;
                            color: #00cc66;
                        }
                    }  
                }
                .price {
                        float: left;
                        // color: #00cc66;
                         color: #ff0066;
                        font-weight: 900;
                        font-size: 38px;
                        vertical-align: middle;
                        width: 90px;
                        text-align: center;
                        // margin-top: 23px;
                        margin-top: 20px;
                        font-family: "Impact";
                    }
                .msg_right {
                    float: left;
                    // margin-top: 20px;
                    margin-top: 17px;
                    margin-left: 5px;
                    // font-size: 12px;
                    font-size: 13px;
                    .unit {
                         font-weight: 900;
                         margin-top: -9px;
                         text-align: left;
                    }
                }
            }
            .store_img {
                position: absolute;
                left: 50%;
                transform: translateX(-155px);
                top: 70px;
                width: 310px;
                height: 310px;
                // height: 300px;
                // width: 360px;
                // height:300px;
                border-radius: 10px 10px 0 0;
            }
            // .zi_left,
            // .zi_right {
            //     color: #c6babc;
            //     position: absolute;
            //     width: 12px;
            //     font-size: 11px;
            // }
            // .zi_left {
            //     left: 10px;
            //     top: 80px;
            // }
            .zi_right {
                // color: #c6babc;
                color: #99cccc;
                position: absolute;
                width: 12px;
                font-size: 9px;
                top: 230px;
                // right: -43px;
                right: -18px;
                div {
                    margin-top: -14px;
                }
            }
            .mark {
                position: absolute;
                // width: 125px;
                // height: 125px;
                width: 165px;
                height: 125px;
                left: 55%;
                top: 40%;
            }
        }
    }
</style>
